<!-- 公告管理 -->
<template>
    <div class="notice-manage">
        <ul class="notice-manage-box" v-infinite-scroll="loadMore"
			  	infinite-scroll-disabled="moreLoading"
			 	infinite-scroll-distance="10">
        	<li v-if="isAllLoad" :class="'single_manage type'+item.status" v-for="item in NoticeMessage"  @click="toNoticeDetails(item.id)">
        		<div class="title"><span>{{item.title}}</span></div>
    			<div class="msg">发布部门：{{item.publishOrgName}}</div>
    			<div class="msg">发布人：{{item.author}}</div>
    			<div class="msg" v-if="item.startTime && item.endTime">起止日期：{{item.startTime}} 至 {{item.endTime}}</div>
    			<div class="status" v-if="item.status==1">编辑中</div>
    			<div class="status" v-else-if="item.status==2">审批中</div>
    			<div class="status" v-else-if="item.status==3">已发布</div>
    			<div class="status" v-else-if="item.status==4">已撤回</div>
    			<div class="status" v-else-if="item.status==5">已过期</div>
        	</li>
        	<!--底部判断是加载图标还是提示“全部加载”-->
			<div class="more_loading" v-show="!queryLoading">
				<mt-spinner type="snake" color="#00ccff" :size="20" v-show=" moreLoading && !allLoaded">加载中</mt-spinner>
				<span v-show="allLoaded && !nodata">全部加载</span>
			</div>
			<li class="nocourse" v-if="nodata && isAllLoad"><i class="iconfont icon-zanwu"></i><p>暂无数据</p></li>
        </ul> 
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'NoticeManage',
  data () {
    return {
    	phone: this.$route.query.phone,
    	NoticeMessage:[],
    	isAllLoad:false,
    	//下拉加载和 暂时没有的搜索
        pageNum           : 0,
        queryLoading      : false,
        moreLoading       : false,
        allLoaded         : false,
        totalNum          : 0,
        pageSize          : 50,
        nodata            : false,
    }
  },
  computed: {
	...mapState(['userPhone']),
  },
  methods:{
  	...mapMutations([
    	'toApp'
    ]),
  	//下拉加载
    loadMore() {
        if (this.allLoaded) {
            this.moreLoading = true;
            return;
        }
        if (this.queryLoading) {
            return;
        }
        this.moreLoading = !this.queryLoading;
        this.pageNum++;
        console.log(this.pageNum);
        this.getNoticeMessage();
    },
  	//获取通知公告
    getNoticeMessage(){
    	let _self = this;
    	// let userPhone = window.localStorage.getItem('loginTel');
    	let uri = 'noticeMessage/list/main';
    	_self.$_get( uri , { 
  			'start':_self.pageNum,
		    'length':_self.pageSize,
		    'userPhone':_self.phone,
  		})
  		.then(function(res) {
  			let data = res;
			if(_self.pageNum == 1){
				_self.NoticeMessage = data.data;
			}else{
				_self.NoticeMessage = _self.NoticeMessage.concat(data.data);
			}
			if(_self.pageNum==1 && _self.NoticeMessage.length==0){
				_self.noData = true;
				_self.moreLoading = !_self.queryLoading;
                _self.allLoaded = true;
			}else{
				if(_self.NoticeMessage.length >= data.recordsTotal ){
					_self.moreLoading = !_self.queryLoading;
					_self.allLoaded = true;
				}else{
					_self.moreLoading = false;
				}
			}

            _self.isAllLoad = true;
            _self.$forceUpdate();
  		})
    },
    toNoticeDetails(uuid){
    	this.$router.push({ name: 'NoticeDetails' , query: { uuid: uuid }})
    }
  },
  mounted(){
  	dd.ready(function(){
        dd.biz.navigation.setTitle({
            title: '通知公告',//标题
            onSuccess : function(result) {},
            onFail : function() {}
        });
    }) 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
	.notice-manage{
		height:100%;
		/*overflow-y:auto;*/
		
		ul{
			height:100%;
			overflow-y:auto;
			background:#f4f4f4;
		padding:20px 20px 80px 0;
		}
		li.single_manage{
			width:100%;
			box-sizing: border-box;
			min-height:150px;
			background: #fff;
			border:1px solid #f4f4f4; /* no */
			/*padding-left:120px;*/
			padding-left:40px;
			padding-top:30px;
			padding-right:30px;
			padding-bottom:30px;
			position:relative;
			text-align: left;
			border-left:10px solid #1e87ef;
			margin-bottom:24px;
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
			box-shadow: 0 0 20px #ddd;
			position:relative;
			i.icon-guanli{
				position:absolute;
				top:0;left:0;
				font-size:70px; /* px */
				line-height:150px;
				width:120px;
				text-align: center;
				color:#1e87ef;
			}
			div.title{
				min-height:60px;
				line-height:40px;
				padding: 10px 0;
				font-size:32px; /* px */
				color:#333;
				font-weight:600;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			div.msg{
				height:40px ;
				line-height: 40px;
				font-size:24px;
				color:#666;
			}
			div.status{
				width:180px;
				text-align: center;
				height:50px;
				line-height: 50px;
				background:#1e87ef;
				position:absolute;
				bottom:30px;right:0;
				color:#fff;
				border-top-left-radius: 30px;
				border-bottom-left-radius: 30px;
			}
		}
		li.type1{
			border-left:10px solid #4da9ec;
			div.status{
				background:#4da9ec;
			}
		}
		li.type2{
			border-left:10px solid #ff8d53;
			div.status{
				background:#ff8d53;
			}
		}
		li.type3{
			border-left:10px solid #28c195;
			div.status{
				background:#28c195;
			}
		}
		li.type4,li.type5{
			border-left:10px solid #999;
			div.status{
				background:#999;
			}
		}
		.nocourse{
			margin-top: 200px;
			.iconfont{
				font-size: 180px;
				color: #999;
			}
			p{
				color: #999;
				font-size: 22px;
				line-height: 80px;
			}
		}
	}
</style>
